<template>
  <div class="order">
    <a-card title="订单">
      <FormHeader :collection="collection"></FormHeader>
      <a-table
        :columns="columns"
        :data="data"
        :pagination="pagination"
        @page-change="handlePageChange"
        @page-size-change="handlePageSizeChange"
      >
        <template #optional>
          <a-button @click="edit">编辑</a-button>
        </template>
      </a-table>
    </a-card>

    <a-modal v-model:visible="editVisible" title="编辑" title-align="start" @ok="handleOk" @cancel="handleCancel">
      <EditForm :gathering="collection"></EditForm>
    </a-modal>
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import importConfig from './order.ts';
import FormHeader from '@com/formHeader/formHeader.vue';
import EditForm from '@com/editForm/editForm.vue';

export default defineComponent({
  name: 'OrderDom',
  components: { FormHeader, EditForm },
  setup() {
    const { queryForm, columns, data, editVisible, editForm, collection, pagination, edit, handlePageChange, handlePageSizeChange } =
      importConfig();

    return {
      queryForm,
      columns,
      data,
      editVisible,
      editForm,
      collection,
      pagination,
      edit,
      handlePageChange,
      handlePageSizeChange,
    };
  },
});
</script>

<style lang="less" scoped>
:deep(.arco-card-header) {
  border-bottom: none;
}

:deep(.arco-card-header-title) {
  text-align: left;
}

.order {
  &-queryForm {
    &-criteria {
      flex: 1 1 0;
    }

    &-btn {
      border-left: 1px solid #ddd;
      flex: 0 0 86px;
      text-align: right;
    }
  }

  &-table {
    font-weight: 500;
  }
}
</style>
